作業Log | scrapbox-selection-2
2020-12-29 07:00:42
作成開始
07:00:51 やること
APIを決めておく必要もある
07:13:51 constructor作った
07:14:05 選択範囲を取得する関数を作る
/icons/done.icon07:23:52
07:23:54 文字列取得関数を作る
/icons/done.icon07:28:37
テストコードも書いた
07:30:29 テスト開始
08:56:56 new MutationObserver()でinstanceを作成した順序で決まるみたい
07:36:03 致命的な問題に気づいた
cursor追跡式だと、2クリックで単語を選択したときに、選択範囲の端を検知できない
07:38:23 algorithmを変更する
選択範囲が出現したら、選択範囲の端のうちcursorがない方を記録する
cursorの文字と選択範囲の端の文字とを比べて、文字の位置が違うほうを記録する
選択範囲を取得したいときに、現在のcursorの位置と選択範囲の端の位置から選択範囲を計算して返す
07:57:48 直した
バグ取りとテストをする
08:02:48 文字は取得できているが、少しずれてた
indexの意味を、左側の文字の番号から文字と文字の間の番号に変えていたことを忘れてた
ずらす
08:08:31 まだerrorが出たり取得できる文字列がおかしかったりする
DOMも出力しておくか
08:41:39 各種関数のerror周りの処理をrefactoringしている
何でコケたのかわかるようにしている
08:44:11 選択範囲の出現と同時に記法が隠れてしまうときにエラーが発生する
コードブロックの先頭の端から↑↓で即座に別の行に移動したときなのに発生する
https://gyazo.com/371018853f1ff0132f4f208fc1be2331
端の位置が取得できなかったときは前回のカーソルの位置を使うようにしたらどうだろうか
09:10:32 大体うまくいったようだ
Ctrl+Aで範囲選択したときだけまだうまく動いていない
まあ全選択のときだけ機能しないということでいいや
そのうち直すかも
09:13:50 console.logを外した
あとはcodeを整えて解説をつければ完成
09:32:01 また致命的なバグを発見した
記法の間から選択していったときにずれてしまう
数式などがそう
記法が隠れたあとも文字が出てしまうのが原因
対策
選択範囲が行内に収まる場合のみ、選択範囲の端を用いる
ここの処理をいじれば、Ctrl+Aで範囲選択したときの対応もできそう
10:00:14 直した。テスト中
多分これでCtrl+A以外は直った
10:20:08 focusが外れたときに選択範囲を取得しようとするとエラーが出るバグを直す
10:48:22 直した
11:04:44 まだバグがある
2クリックで単語するときは問題なし
[*** このなかもそう]でも起きる
11:52:35 [*** ]の内部で発生するみたい
右から左に選択したときのみ発生する問題みたい
左から右に選択したときは何も起きない
なぜだ？
ともかく、console.log()を挟んで詳しく見るしかないか。
なんかわかったぞ
大きな文字の高さと行本来の高さとが一致しなくなったのが原因だ！
選択範囲の右端はrightとbottomで当たり判定を行っている。そのうちのbottomが行外へはみ出してしまったということだろう。
https://gyazo.com/a9101335d9fe7f259e6841dd7f3bf934
ここを直せばいいかな？
code:diff
- const lineHeight = scrapboxDOM.lines.lastElementChild.clientHeight;
+ const lineHeight = line.clientHeight;
12:17:09 なおったー！
/icons/done.iconていうか一行選択かつfocusが外れたときも記法が隠れてしまうのか
これも盲点だった
12:22:39 focusを失ったときに少しずれることがある
cursorの位置判定で、実際のDOMを使っている都合上、毎回毎回位置判定をする限り避けることができない
2021-01-01 13:54:36 修正完了！
このなかもそう